<template>
	<view>
		<!-- 头部 -->
		<mini-header title="我的购物车" :tips="'温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算'" :mustLogin="false"></mini-header>
		<view>
			<view class="" v-if="cartList.length == 0" style="padding-top: 100px;min-height: 680px;background: #fff;">
				<u-empty icon-size='700' text="购物车暂无商品~" src="../../static/image/common/cart.png"></u-empty>
			</view>
			<view style="min-height: 665px;" v-else>
				<view class="gouwulist" v-for="(i,index) in cartList" :key="index">
					<view class="cartInfo">
						<view class="common-left">
							<view class="">
								<u-checkbox-group>
									<u-checkbox style="cursor: pointer;" size='40' :disabled="stockCheck(i.stock)"
										active-color="#e93323" shape="circle" v-model="i.check"
										@change="selected(index,i)"></u-checkbox>
								</u-checkbox-group>
							</view>
							<view class="common" style="width: 100%;">
								<image :src="i.logoUrl" mode="" class="logoImg"
									@click="toDetail('/pages/goods/index?id=' + i.productId)" mode="aspectFit"></image>
								<view class="rightBottom">
									<view class="goodsName" @click="toDetail('/pages/goods/index?id=' + i.productId)">
										{{i.productName}}
									</view>
									<view class="sku" @click="toDetail('/pages/goods/index?id=' + i.productId)">
										<text>{{i.attributeValue}}</text>
									</view>
									<view class="common moneyBtn">
										<view class="" style="color: red;"
											@click="toDetail('/pages/goods/index?id=' + i.productId)">
											¥<text class="moneyNum">{{Number(i.unitPrice).toFixed(2)}}</text>
										</view>
									</view>
								</view>
								<view class="common rightBtn" style="justify-content: space-around;">
									<view class="numBox" v-if="i.stock>0">
										<view class="numBtn" @click="getRemove(index,i)"><u-icon name="minus"
												size='30' style="color: #707070;"></u-icon></view>
										<view class="centerNum">{{i.quantity}}</view>
										<view class="numBtn-r" @click="getAdd(index,i)"><u-icon name="plus"
												size='30' style="color: #707070;"></u-icon></view>
									</view>
									<view v-else style="font-size: 12px;color: #999;">暂无库存</view>
								</view>
								<view class="rightTip" @click="delPro(i.cartId)">删除</view>
							</view>
						</view>
					</view>
					<view class="cartPay" >
						<view class="payLeft">
							<view class="payInfo">
								<a>合计:</a>
								<text>¥<text style='font-size: 24px;margin-left: 1px;'>{{Number(totalMoney).toFixed(2)}}</text></text>
							</view>
							<view class="allBox">
								<u-checkbox-group>
									<u-checkbox style="cursor: pointer;" size='40' :disabled="stockCheck(i.stock)"
										active-color="#e93323" shape="square" v-model="allchecked"
										@change="allPrice"></u-checkbox>
								</u-checkbox-group>
								<text>全选</text>
							</view>
						</view>
						<view class="payRight" @click="getCartOrder()">去结算</view>
					</view>
				</view>
			</view>
			<view style="width: 100%;height: 60px;"></view>
		</view>



		<!-- 页脚 -->
		<zw-footer></zw-footer>

	</view>
</template>

<script>
	import miniHeader from '@/components/common/mini-header.vue';
	import count from '@/components/cart/count.vue';
	import {
		getAccToken,
		removeAccToken,
		removeRefToken
	} from '@/userToken.js'
	import {
		mapState,
		mapGetters
	} from 'vuex';

	export default {
		components: {
			miniHeader,
			count,

		},
		data() {
			return {
				title: '购物车',
				tabbar: '',
				allchecked: false,
				select: false,
				cartList: [],
				showDel: false,
				value: 0,
				num: 0,
				productId: '',
				skuName: '',
				skuId: '',
				manage: true,
				userShopCartId: '',
				type: 1,
				delArr: [],
				money: 0,
				totalMoney: 0, //购物车总金额
				userInfo: ''
			}
		},
		onLoad() {
			this.getData()
			this.userInfo = uni.getStorageSync('userInfo')
		},

		onReady() {
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods: {
			toDetail(url) {
				uni.navigateTo({
					url: url
				})
			},
			stockCheck(num) {
				if (num > 0) {
					return false
				} else {
					return true
				}
			},
			// 查询购物车
			getData(index,flag) {
				this.uni_request({
					url: '/user/cart/list',
					method: 'get',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.getNum()
							this.cartList = res.data.data;
							for (var i = 0; i < this.cartList.length; i++) {
								this.cartList[i].check = false
							}
							
							if(index>=0){
								this.cartList[index].check = flag;
								this.getInfo()
							}
							
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			
			// 单选
			selected(index, item) {
				this.cartList[index].check = !this.cartList[index].check;
				this.getInfo()
				

			},
			// 全选结算
			allPrice() {
				var totalMoney = 0
				this.allchecked  = !this.allchecked
				if (this.allchecked) {
					for (var i = 0; i < this.cartList.length; i++) {
						this.cartList[i].check = true;
						totalMoney = Number(totalMoney + Number(this.cartList[i].unitPrice ) * this.cartList[i].quantity);
					}
					this.totalMoney = totalMoney
				} else {
					for (var i = 0; i < this.cartList.length; i++) {
						this.cartList[i].check = false
					}
					this.totalMoney = 0
				}
			},

			
			
			//购物车删除
			delPro(id) {
				this.uni_request({
					url: '/user/cart/'+id,
					method: 'DELETE',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							uni.showToast({
								icon: "none",
								title: '删除成功'
							})
							this.getData()
						} else {
							this.showDel = false
							uni.showToast({
								title: res.data.msg,
								icon: "none"
							})
						}
					}
				})
			},
			// 数量减少/删除
			getRemove(index, item) {
				var delNum = Number(item.quantity - 1);
				if(delNum == 0){
					return
				}
				this.uni_request({
					url: '/user/cart/decrease/'+item.cartId,
					method: 'put',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.cartList[index].quantity = delNum
							// this.getData(index,item.check)
							this.getNum()
							this.getInfo()
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					}
				})
			},
			getNum() {
				this.uni_request({
					url: '/user/cart/number',
					method: 'GET',
					success: (res) => {
						if (res.data.code == 0 || res.data.code == 200) {
							this.resetSetItem('sellerCartNum', res.data.data);
							this.$forceUpdate()
						} else {
							uni.showToast({
								icon: "none",
								title: res.data.msg
							})
						}
					}
				})
			},
			// 数量增加
			getAdd(index,item) {
				var addNum = Number(item.quantity + 1);
				if(addNum <= item.stock){
					this.uni_request({
						url: '/user/cart/add/'+item.cartId,
						method: 'PUT',
						success: (res) => {
							if (res.data.code == 0 || res.data.code == 200) {
								this.cartList[index].quantity = addNum
								this.getNum()
								// this.getData(index,item.check)
								this.getInfo()
							} else {
								uni.showToast({
									icon: "none",
									title: res.data.msg
								})
							}
						}
					})
				}else{
					uni.showToast({
						title: '库存不足',
						icon: "none"
					})
				}
			},
			// 购物车结算计算
			getInfo() {
				var totalMoney = 0;
				var cartLength = 0;
				for (var i = 0; i < this.cartList.length; i++) {
					if (this.cartList[i].check) {
						totalMoney = Number(totalMoney + Number(this.cartList[i].unitPrice ) * this.cartList[i].quantity);
						cartLength++;
					}
				}
				if(cartLength == this.cartList.length){
					this.allchecked = true;
				}else{
					this.allchecked = false;
				}
				
				this.totalMoney = totalMoney
				this.$forceUpdate()
			},
			// 购物车下单
			getCartOrder(index) {
				var arr = []
				var data = this.cartList
				var num = [];
				var skuIds = [];
				for (var i = 0; i < data.length; i++) {
					if(data[i].check == true){
						arr.push(data[i].cartId)
					}
				}


				if (!this.totalMoney) {
					uni.showToast({
						title: '请选择要结算的商品',
						icon: "none"
					})
				} else {

					uni.navigateTo({
						url: '/pages/order/cartOrder?ids=' + JSON.stringify(arr) 
					})

				}


			},
		}
	}
</script>

<style lang="scss">
	page{
		background: #fff !important;
	}
	.goodstitle {
		font-weight: bold;
		margin: 20px 0 20px 0;
	}

	.cartPay {
		position: fixed;
		right: calc((100vw - 1250px) / 2);
		bottom: 130px;
		z-index: 9;
		align-items: center;
		display: flex;
		justify-content: space-between;
		padding: 16px;border-radius: 15px;border: 1px solid #eeeeee;
		background: #fff;
		width: 400px;
		.payRight {
			align-items: center;
			background-color: #ff2205;
			border-radius: 12px;
			color: #fff;
			cursor: pointer;
			display: flex;
			flex-shrink: 0;
			font-size: 16px;
			font-weight: 600;
			height: 48px;
			justify-content: center;
			position: relative;
			width: 100px;
		}
		.payRight:hover{
			background-color: #dd1a04;
		}
		.payLeft {
			height: 60px;
			width: 200px;
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			flex-direction: column;
			.payInfo{
				font-size: 18px;
				font-weight: bold;margin-bottom: 5px;
				text{color: #ff2205;}
				a{margin-right: 5px;}
			}
			.allBox{
				position: relative;width: 100%;
				text{position: absolute;left: 25px;font-size: 14px;color: #6c6c6c;}
			}
		}
	}

	.column-center {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.goodsContent {
		margin-bottom: 20px;
	}

	.common-around {
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.moreBtns {
		padding: 0 20px 0 20px;

		.cancelBtn {
			padding: 10px 0 10px 0;
		}

		.confirmBtn {
			color: #FF9F00;
			padding: 10px 0 10px 0;
		}

		.wire {
			height: 30px;
		}
	}




	.pic {
		width: 94%;
		margin-top: 20px;
		border-radius: 10px;

		image {
			width: 400px;
			height: 400px;
		}
	}

	.common {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}



	.common-left {
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.cartInfo {
		.logoImg {
			width: 100px;
			height: 100px;
			border-radius: 10px;
			cursor: pointer;
		}
		.rightTip{font-size: 14px;color: #999;}
		.rightTip:hover{
			color: #ff2205;cursor: pointer;
		}
		.rightBottom {
			width: calc(100% - 350px);
			.goodsName {
				font-size: 16px;
				font-weight: bold;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				cursor: pointer;
			}

			.sku {
				border-radius: 5px;
				font-size: 13px;
				margin-top: 10px;
				@extend %flex-align-center;
				cursor: pointer;

				text {
					background-color: #ececec;
					color: #999;
					padding: 5px 8px;
					border-radius: 5px;
				}
			}

			.moneyBtn {
				margin-top: 20px;
				cursor: pointer;

				.moneyNum {
					font-size: 18px;
					font-weight: bold;
				}
			}
		}
	}

	

	.rightBtn {
		.centerNum {
			padding: 2px 5px 2px 5px;
			background-color: #fff;
		}

		.numBox {
			@extend %flex-align-center;

			.numBtn {
				width: 35px;
				height: 35px;
				@extend %flex-align-center;
				justify-content: center;
				border: 1px solid #d3d3d3;
				cursor: pointer;
				border-radius: 10px 0px  0  10px;
			}
			.numBtn-r {
				width: 35px;
				height: 35px;
				@extend %flex-align-center;
				justify-content: center;
				border: 1px solid #d3d3d3;
				cursor: pointer;
				border-radius:  0px 10px 10px 0px  ;
			}
			.centerNum {
				@extend %flex-align-center;
				justify-content: center;
				width: 60px;
				height: 35px;
				border: 1px solid #d3d3d3;
				border-left: none;
				border-right: none;
			}
		}
	}

	



	.gouwulist {
		width: 1200px;
		padding: 20px 20px 30px 20px;
		background-color: white;
		position: relative;
		margin: 0 auto;
		border-radius: 1px;
		display: flex;
		flex-direction: column;
		margin-top: 10px;
		border-bottom: 1px solid #ececec;
		.gouwutitle {
			width: 100%;
			display: flex;
			@extend %flex-align-center;
		}

		.gouwucon {
			width: 100%;
			height: 40%;
			display: flex;
			flex-direction: row;
		}

		.gouwutwo {
			width: 100%;
			height: 40%;
			display: flex;
			flex-direction: row;
		}
	}



	.juzhon {
		display: inline-block;
		position: relative;
		// top: 50%;
		-webkit-transform: translateY(60%);
	}
</style>